<template>
    <div :style="{ height: chartHeight + 'px', width: '100%',minWidth:'1000px',minHeight:'1000px' }" :id="id"></div>
</template>
    
<script>

import * as echarts from 'echarts/core';
import { TreeChart } from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    DatasetComponent
} from 'echarts/components';
import {
    CanvasRenderer
} from 'echarts/renderers';
echarts.use(
    [
        TitleComponent,
        TooltipComponent,
        GridComponent,
        TreeChart,
        LegendComponent,
        DatasetComponent,
        CanvasRenderer
    ]
);
export default {
    name: 'ChartTree',
    components: {
    },
    props: {
        id: {
            default: 'myChart2'
        },
        styles: {
            default: {}
        },
        dataList:Object
    },
    data() {
        return {
            chartHeight: 1000,
            data: {
                name: 'flare',
                children: [
                    {
                        name: 'data',
                        children: [
                            {
                                name: '马云',
                                children: [
                                    { name: '马云', value: 721 },
                                    { name: '我对钱不感兴趣', value: 4294 }
                                ]
                            },
                            {
                                name: '雷军',
                                children: [
                                    { name: '金山', value: 721 },
                                    { name: 'Are you ok ?', value: 4294 }
                                ]
                            },
                            {
                                name: 'DataUtil',
                                value: 3322
                            }
                        ]
                    },
                    {
                        name: '广州',
                        children: [
                            { name: '天河', value: 8833 },
                            { name: '白云', value: 1732 },
                            { name: '黄埔', value: 3623 }
                        ]
                    },
                    {
                        name: 'flex',
                        children: [{ name: 'FlareVis', value: 4116 }]
                    },
                    {
                        name: '腾讯',
                        children: [
                            { name: 'AggregateExpression', value: 1616 },
                            { name: 'And', value: 1027 },
                            { name: 'Arithmetic', value: 3891 },
                            { name: 'CompositeExpression', value: 3677 },
                            { name: 'Count', value: 781 },
                            { name: 'DateUtil', value: 4141 },
                            {
                                name: '英雄联盟', value: 933, children: [
                                    { name: '蒙多', value: 2105 },
                                    { name: '德莱文', value: 1316 },
                                    { name: '德玛西亚', value: 3151 },
                                    { name: '火男', value: 3770 },
                                    { name: '剑姬', value: 3770 },
                                ]
                            },
                            { name: 'Expression', value: 5130 },
                            { name: 'ExpressionIterator', value: 3617 },
                            { name: 'Fn', value: 3240 },
                            { name: 'If', value: 2732 },
                            { name: 'IsA', value: 2039 },
                            {
                                name: '马化腾', value: 1214, children: [
                                    { name: '小马哥', value: 2105 },
                                    { name: '南山必胜客', value: 1316 },
                                    { name: '充五万', value: 3151 },
                                ]
                            },
                            { name: 'Match', value: 3748 },
                            { name: 'QQ', value: 843 },
                            {
                                name: '王者荣耀',
                                children: [
                                    { name: '小乔', value: 593 },
                                    { name: '曹操', value: 330 },
                                    { name: '诸葛亮', value: 287 },
                                    { name: '夏侯惇', value: 277 },
                                    { name: 'distinct', value: 292 },
                                    {
                                        name: '蔡徐坤',
                                        children: [
                                            { name: '唱', value: 2105 },
                                            { name: '跳', value: 1316 },
                                            { name: 'rap', value: 3151 },
                                            {
                                                name: '篮球',
                                                children: [
                                                    { name: '鸡你太美', value: 2105 },
                                                    { name: 'NBA', value: 1316 },
                                                    { name: '只因', value: 3151 },
                                                    { name: '白色篮球', value: 3770 },
                                                ]
                                            },
                                        ]
                                    },
                                    { name: 'div', value: 595 },
                                    { name: 'eq', value: 594 },
                                    { name: 'fn', value: 460 },
                                    { name: 'gt', value: 603 },
                                    { name: 'gte', value: 625 },
                                    { name: 'iff', value: 748 },
                                    { name: 'isa', value: 461 },
                                    { name: 'xor', value: 354 },
                                    { name: 'x_x', value: 264 }
                                ]
                            },
                            { name: 'Minimum', value: 843 },
                            { name: 'Not', value: 1554 },
                            { name: 'Or', value: 970 },
                            { name: 'Query', value: 13896 },
                            { name: 'Range', value: 1594 },
                            { name: 'Variable', value: 1124 },
                            { name: 'Variance', value: 1876 },
                            { name: 'Xor', value: 1101 }
                        ]
                    },
                    {
                        name: 'scale',
                        children: [
                            { name: 'IScaleMap', value: 2105 },
                            { name: 'LinearScale', value: 1316 },
                            { name: 'LogScale', value: 3151 },
                            { name: 'OrdinalScale', value: 3770 },
                        ]
                    }
                ]
            }
        }




    },
    mounted() {

        this.draw();
    },
    methods: {
        draw() {
            let myChart = echarts.init(document.getElementById(this.id))

            this.$nextTick(() => {

                // var container = document.getElementById(this.id);
                // myChart.on('click', function (params) {
                //     if (params.componentType === 'series') {
                //         // 点击到了 series 上
                //         if (!params.value) {
                //             // 点击的节点有子分支（可点开）
                //             var elesArr = Array.from(new Set(myChart._chartsViews[0]._data._graphicEls));
                //             var height = 1200; // 这里限制最小高
                //             var currentHeight = 10 * (elesArr.length - 1) || 20; // 每项10px
                //             var newHeight = Math.max(currentHeight, height);
                //             container.style.height = newHeight + 'px';
                //             myChart.resize();
                //         }
                //     }
                // });

                myChart.setOption({

                    tooltip: {
                        trigger: 'item',
                        triggerOn: 'mousemove'
                    },
                    series: [
                        {
                            type: 'tree',
                            id: 0,
                            name: 'tree1',
                            data: [this.dataList],
                            top: '10%',
                            left: '8%',
                            bottom: '22%',
                            right: '20%',
                            symbolSize: 7,
                            edgeShape: 'polyline',
                            edgeForkPosition: '63%',
                            initialTreeDepth: 3,
                            roam: true,
                            scale: 'move',
                            lineStyle: {
                                width: 2
                            },
                            label: {
                                backgroundColor: '#fff',
                                position: 'left',
                                verticalAlign: 'middle',
                                align: 'right'
                            },
                            leaves: {
                                label: {
                                    position: 'right',
                                    verticalAlign: 'middle',
                                    align: 'left'
                                }
                            },
                            emphasis: {
                                focus: 'descendant'
                            },
                            expandAndCollapse: true,
                            animationDuration: 550,
                            animationDurationUpdate: 750
                        }
                    ]
                });



                const eleArr = Array.from(new Set(myChart._chartsViews[0]._data._graphicEls))
                const itemHeight = 20
                const currentHeight = itemHeight * (eleArr.length - 1) || itemHeight
                let newHeight = Math.max(currentHeight, itemHeight)
                if(newHeight<1000){
                    newHeight=1000
                }
                this.chartHeight = newHeight
                myChart.resize({
                    height: newHeight
                })
            })



        }

    },
    watch: {
    },
    computed: {
    }

}
</script>
    
<style scoped>
</style>